<template>
	<view class="goodsSwiperBox" v-show="datas">
		<swiper class="gswSw" 
		v-if="datas&&datas.length>0" 
		:display-multiple-items="config.multiple||3" 
		:autoplay="config.autoplay" 
		:interval="config.interval||5000" 
		:duration="config.duration||500" 
		:circular="config.circular||false" 
		:next-margin="config.hideMargin?'0':'100rpx'" 
		:current="config.current||0" 
		@change="swiperChange" 
		:disable-touch="disable">
			<swiper-item v-for="(list,i) in datas" :key="i">
				<view class='swiper-item gswGoods' @tap='tapFun' :data-id="list.id" :data-index="i">
					<view class="vip_top_time">
						<text class="freeTimes_titile">免费次数</text>
						<view class="freeTimes_content">
							<text class="freeTimes_num">{{list.usageTimes}}次{{list.price}}元</text>
						</view>
					</view>
				  <view class='vip_center_time'>
					  剩余{{list.stocks}}张
				  </view>
				  <view class="getItNow" @click="buyVipCard(list.id)">立即购买</view>
				</view>
			</swiper-item>
		</swiper>
		<block v-if="config.shadow">
			<view class="shadowLeft" v-show="current>0"></view>
			<view class="shadowRight" v-show="datas.length>config.multiple||4"></view>
		</block>
	</view>
</template>

<script>
	export default {
		name:"vipswiper",
		props:{
			datas:{
				type: Array,
				default: function() {
					return [
						
					];
				}
			},
			config:{
				type: Array,
				default: function() {
					return [
						
					];
				}
			},
			disable:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				current:0
			}
		},
        created() {
        },
        methods:{
			swiperChange(e){
				this.current = e.detail.current;
			},
			tapFun(e){
				var id= parseInt(e.currentTarget.dataset.id)||0,
					index=parseInt(e.currentTarget.dataset.index)||0;
				this.$emit("chooseVipSelect",{id:id,index:index})
			},
			buyVipCard(id){
				let that = this
				let postData = {cardId:id}
				this.$api.vip.buyVip(postData)
				.then(res => {
					if(res.code == 200){
						//拉起支付
						this.$payCommon.xcxPay(res.data,'/pages/my/index')
					}else{
						this.$commonJs.showToast.showNoneToast(res.msg)
					}
				})
				.catch(err => {
					this.$commonJs.showToast.showNoneToast(err)
				})
			}
        }
	}
</script>

<style>
	.goodsSwiperBox{width: 722rpx;margin-left: 28rpx;background: #fff;padding: 0 0 0 0;position: relative;box-sizing: border-box;}
	.goodsSwiperBox .gswTitle{display: flex;justify-content: space-between;align-items: center;height: 80rpx;color: #999;padding-left: 10rpx;}
	.goodsSwiperBox .gswTitle .gswTL{display: flex;align-items: center;font-size: 24rpx;}
	.goodsSwiperBox .gswTitle .gswTL text:first-child{font-weight: bold;font-size: 36rpx;margin-right: 5rpx;color: #000;}
	.goodsSwiperBox .gswTitle .gswTL text:nth-child(2){background: red;color: #fff;border-radius: 16rpx;line-height: 33rpx;font-size: 22rpx;padding: 0 12rpx;}
	.goodsSwiperBox .gswTitle .gswTR{display: flex;align-items: center;font-size: 28rpx;}
	.goodsSwiperBox .gswTitle .gswTR image{width: 24rpx;height: 24rpx;}
	.gswSw{height: 210rpx}
	.gswGoods{width: 100%; background: url(../../static/vip_bg.png);background-repeat: no-repeat;width: 176rpx;height: 210rpx;background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;}
	.gswGoods image{width: 100%;height: 176rpx;border-radius: 10rpx;display: block;}
	.gswGoods .vip_top_time{
		width: 176rpx;
	}
	.gswGoods .vip_top_time .freeTimes_titile{
		color: #532701;
		font-size: 24rpx;
		width: 176rpx;
		text-align: center;
		display: block;
		float: left;
		margin-top: 14rpx;
	}
	.gswGoods .vip_top_time .freeTimes_content{
		width: 176rpx;
		height: 54rpx;
		float: left;
		text-align: center;
		/* line-height: 54rpx; */
	}
	.gswGoods .vip_top_time .freeTimes_content .freeTimes_num{
		color: #EE3431;
		font-size: 28rpx;
		font-weight: 700;
	}
	.gswGoods .vip_top_time .freeTimes_content .freeTimes_flag{
		color: #532701;
		font-size: 20rpx;
		line-height: 54rpx;
		margin-left: 4rpx;
	}
	.gswGoods .vip_center_time{
		height: 40rpx;
		width: 176rpx;
		line-height: 40rpx;
		margin-top: 10rpx;
		text-align: center;
		float: left;
		font-size: 28rpx;
		color: #693F00;
	}
	.gswGoods .getItNow{
		width: 130rpx;
		height: 40rpx;
		float: left;
		background-color: #693F00;
		font-size: 22rpx;
		color: #ceb693;
		border-radius: 20rpx;
		text-align: center;
		line-height: 40rpx;
		margin: 6rpx 0 0 22rpx;
	}

	.shadowLeft{position: absolute;left: 0;top: 80rpx;width: 125rpx;height: 250rpx;background-image: linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,225,0));}
	.shadowRight{position: absolute;right: 0;top: 80rpx;width: 125rpx;height: 250rpx;background-image: linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,225,0));}
</style>
